<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layouts/default">
<head>
    <title>FundRequest - Fund Existing GitHub Request</title>
</head>
<body>
<th:block layout:fragment="content">
    <section class="section section--header mb-5">
        <div class="media">
            <div class="d-none d-md-flex header-image">
                <i class="fab fa-github-alt fa-10x text-secondary"></i>
            </div>
            <div class="media-body">
                <h1 class="text-secondary">
                    <span class="d-inline-block d-md-none">
                        <i class="fab fa-github-alt fa-1x text-secondary"></i>
                    </span>
                    Fund an Existing Request
                </h1>

                <div class="description text-muted">
                    <p>
                        GitHub has millions of existing issues, not every request requires the creation of a new issue.
                        Incentive our developer to start or keep working on an open issue.
                    </p>
                </div>
                <a class="btn btn-link text-secondary" th:href="@{'#faq'}">
                    How it works...
                </a>
            </div>
        </div>
    </section>

    <div is="wizard-component" inline-template="false" th:attr="'v-bind:arkanetoken'='&quot;' + ${arkanetoken} + '&quot;','v-bind:arkane-environment'='&quot;' + ${@environment.getProperty('network.arkane.environment')} + '&quot;'">
        <div class="wizard">
            <section class="position-relative mb-5">
                <div class="wizard__content">
                    <header class="wizard__header mb-2">
                        <div class="wizard__step-titles" v-bind:style="{ height: stepTitlesHeight + 'px' }"
                             ref="stepTitles">
                            <div class="wizard__step-title" ref="stepTitle1" v-bind:class="getClassesPanel(1)">
                                <h2>Start filling in the request details</h2>
                                <h3>Let's start by filling in all the information that developers need to understand
                                    your request.</h3>
                            </div>
                            <div class="wizard__step-title" ref="stepTitle2" v-bind:class="getClassesPanel(2)">
                                <h2>Define payment details</h2>
                                <h3>Define the amount of funding you want to add to your request as well as your
                                    preferred payment method.</h3>
                            </div>
                            <div class="wizard__step-title" ref="stepTitle3" v-bind:class="getClassesPanel(3)">
                                <h2>Request Summary</h2>
                                <h3>Overview of your request. Verify, pay and we'll add your request to our
                                    marketplace.</h3>
                            </div>
                        </div>
                        <div class="wizard__steps">
                            <nav class="steps">
                                <div class="step" v-bind:class="getClassesStep(1)">
                                    <div class="step__content">
                                        <a class="step__link"
                                           data-toggle="tooltip" data-placement="bottom" title="Select Github issue"
                                           v-on:click="gotoStep(1, true)">
                                        </a>
                                        <p class="step__number step__number--blue"></p>
                                        <div class="lines">
                                            <div class="line -background"></div>
                                            <div class="line -progress"></div>
                                            <div class="line -overlay"></div>
                                            <div class="line -tooltip-overlay" data-toggle="tooltip"
                                                 data-placement="bottom"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="step" v-bind:class="getClassesStep(2)">
                                    <div class="step__content">
                                        <a class="step__link" v-on:click="gotoStep(2, true)"
                                           data-toggle="tooltip" data-placement="bottom" title="Payment details">
                                        </a>
                                        <p class="step__number"></p>
                                        <div class="lines">
                                            <div class="line -background"></div>
                                            <div class="line -progress"></div>
                                            <div class="line -overlay"></div>
                                            <div class="line -tooltip-overlay" data-toggle="tooltip"
                                                 data-placement="bottom"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="step" v-bind:class="getClassesStep(3)">
                                    <div class="step__content">
                                        <a class="step__link" v-on:click="gotoStep(3, true)"
                                           data-toggle="tooltip" data-placement="bottom" title="Request Summary">
                                        </a>
                                        <p class="step__number step__number--yellow"></p>
                                        <div class="lines">
                                            <div class="line -background"></div>
                                            <div class="line -overlay"></div>
                                        </div>
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </header>
                    <div class="wizard__title">
                        <div class="row">
                            <div class="col-12">
                                <h4 class="wizard__title__text" v-if="githubIssue == null">
                                    Please select a GitHub issue
                                </h4>
                                <h4 class="wizard__title__text" v-if="githubIssue != null" v-cloak="true">
                                    <img v-bind:src="githubIssue.avatar + '?size=22'" height="22" width="22" />
                                    <a v-bind:href="githubIssue.html_url" target="_blank" rel="noopener noreferrer">
                                        {{githubIssue.title}} <span class="wizard__title__number">#{{githubIssue.number}}</span>
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="panels" v-bind:style="{ height: panelsHeight + 'px' }" ref="panels">
                        <div class="panel" ref="panelStep1"
                             v-bind:class="getClassesPanel(1)">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            Which GitHub issue would you like to fund?
                                        </div>
                                        <div class="card-body">
                                            <input class="form-control" type="text"
                                                   ref="requestUrl"
                                                   name="request-url"
                                                   data-form-validation="required;github"
                                                   placeholder="ex.: https://github.com/repoXYZ/issues/1"
                                                   v-bind:value="githubUrl"
                                                   v-on:input="updateUrl($event.target.value)"
                                                   th:classappend="${url != null ? 'disabled' : ''}"
                                                   th:readonly="${url != null}"
                                                   th:attr="'data-value'=${url}" />
                                            <div class="invalid-feedback">Please enter a valid github issue</div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="wizard__footer">
                                <span class="text-danger" th:if="${arkanetoken eq null}">FundRequest uses Arkane as payment provider, to continue please <a class="text-danger btn-link focus" href="/profile/link/arkane">connect an Arkane account</a></span>
                                <span class="text-danger" th:if="${arkanetoken != null && profile.getWallets().isEmpty()}">FundRequest uses Arkane as payment provider, to continue please <a class="text-danger btn-link focus" href="/profile/managewallets">link an Arkane wallet</a></span>
                                <button class="btn btn-secondary" v-on:click="gotoStep(2)" th:disabled="${arkanetoken eq null && profile.getWallets().isEmpty()}">
                                    Continue to payment details
                                </button>
                            </div>
                        </div>

                        <div class="panel" ref="panelStep2"
                             v-bind:class="getClassesPanel(2)">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            Which wallet do you want to use to fund the request?
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12 col-md-12 col-lg-12">
                                                    <div class="input-group">
                                                            <select title="token" class="form-control" size="auto"
                                                                    v-model="selectedWallet">
                                                              <option v-for="wallet in wallets"
                                                                      v-bind:value="wallet">
                                                                {{ wallet.description }} ({{getReadableAddress(wallet.address)}})
                                                              </option>
                                                            </select>
                                                        </span>
                                                            <div class="invalid-feedback" v-if="errorMessages != null">
                                                                {{ errorMessages.fundAmount }}
                                                            </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            For how much would you like to fund the request?
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12 col-md-6 col-lg-4">
                                                    <div class="input-group">
                                                        <input class="form-control text-right"
                                                               name="fundAmount"
                                                               data-form-validation="required;currency"
                                                               placeholder="eg.: 120.00"
                                                               type="text"
                                                               v-model.lazy="fundAmount"
                                                               v-money="moneyConfig"
                                                        />
                                                        <span class="input-group-prepend"
                                                              v-if="selectedToken != null">
                                                            <select title="token" class="form-control" size="auto"
                                                                    v-model="selectedToken">
                                                              <option v-for="token in supportedTokens"
                                                                      v-bind:value="token">
                                                                {{ token.symbol }}
                                                              </option>
                                                            </select>
                                                        </span>
                                                        <div class="invalid-feedback" v-if="errorMessages != null">
                                                            {{ errorMessages.fundAmount }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wizard__footer">
                                <button class="btn btn-link text-secondary" v-on:click="gotoStep(1)">
                                    Back to request details
                                </button>

                                <button class="btn btn-secondary" v-on:click="gotoStep(3)">
                                    Continue to summary
                                </button>
                            </div>
                        </div>

                        <div class="panel" ref="panelStep3"
                             v-bind:class="getClassesPanel(3)">
                            <div class="row md-3" v-if="githubIssue != null &amp;&amp; selectedToken != null">
                                <div class="col-12">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            Summary
                                        </div>
                                        <div class="card-body">
                                            <div class="px-3">
                                                <div class="row">
                                                    <div class="col-12 col-md-9">
                                                        Fund an Existing Request
                                                        (<a v-bind:href="githubIssue.html_url" target="_blank"
                                                            rel="noopener noreferrer">
                                                        <span class="text-muted">{{githubIssue.owner}}/{{githubIssue.repo}} #{{githubIssue.number}}</span>
                                                    </a>)
                                                    </div>
                                                    <div class="col-12 col-md-3 text-right text-nowrap">
                                                        {{fundAmount}} {{selectedToken.symbol}}
                                                    </div>
                                                </div>
                                                <hr />
                                                <div class="row">
                                                    <div class="col-12 col-md-8">
                                                        Total
                                                    </div>
                                                    <div class="col-12 col-md-4 text-right lead text-nowrap">
                                                        {{totalAmount}} {{selectedToken.symbol}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer card-footer--light">
                                            Selected payment method: <strong>{{paymentMethod.text}}</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wizard__footer">
                                <button class="btn btn-link text-secondary" v-on:click="gotoStep(2)">
                                    Back to payment details
                                </button>

                                <button class="btn btn-secondary" v-on:click="fund()">
                                    <span v-if="paymentMethod == paymentMethods.arkane">Start transaction</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" style="display: none" ref="approveInfoModal" tabindex="-1" role="dialog"
                     v-cloak="true" v-if="githubIssue != null &amp;&amp; selectedToken != null">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    <span class="text-primary">Fund</span>
                                    <span class="text-muted">
                                        {{githubIssue.owner}}/{{githubIssue.repo}} #{{githubIssue.number}}
                                    </span>
                                </h5>
                                <button type="button" class="close" v-on:click="hideApproveInfoModal()">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row mb-2">
                                    <div class="col-12 d-flex align-items-center">
                                        <ul class="bullet-steps" v-if="currentAllowance === 0">
                                            <li class="bullet-steps__item -yellow">First time funding with
                                                                                   {{selectedToken.symbol}}?
                                            </li>
                                            <li class="bullet-steps__item -green">We will need to let the smart contract
                                                                                  know that you approve funding with
                                                                                  {{selectedToken.symbol}}. One time
                                                                                  only.
                                            </li>
                                            <li class="bullet-steps__item -blue">So when clicking 'Continue transaction'
                                                                                 you'll
                                                                                 be offered 2 transactions. The first
                                                                                 one is
                                                                                 for you to approve funding in
                                                                                 {{selectedToken.symbol}} tokens,
                                                                                 the 2nd one is to transfer the
                                                                                 {{selectedToken.symbol}} tokens to the
                                                                                 request.
                                            </li>
                                        </ul>
                                        <ul class="bullet-steps"
                                            v-if="currentAllowance > 0 &amp;&amp; currentAllowance &lt; currentFundAmount">
                                            <li class="bullet-steps__item -yellow">Your allowance in
                                                                                   {{selectedToken.symbol}} is smaller
                                                                                   the {{currentFundAmount}}?
                                            </li>
                                            <li class="bullet-steps__item -green">
                                                We will need to let the smart contract know that you approve more
                                                funding with {{selectedToken.symbol}}.
                                                This will take 2 transactions, a first one to set the allowance to 0, a
                                                2nd one to approve the extra funding.
                                            </li>
                                            <li class="bullet-steps__item -blue">So when clicking 'Continue transaction'
                                                                                 you'll have submit 3 transactions. The
                                                                                 first 2 are to approve the tokens, the
                                                                                 3th one is to fund.
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12 d-flex justify-content-end">
                                        <button class="btn btn-secondary" v-on:click="fund()">
                                            <span>Continue transaction</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-2" id="faq" ref="faq">
                <faq v-bind:location="'/rest/faq/fundGithub'"></faq>
            </section>
        </div>
    </div>

</th:block>

<th:block layout:fragment="css">
</th:block>

</body>
</html>